<script setup>
import router from "@/router/index.js"
import {ref, watch, onMounted} from "vue"
import {useRoute} from "vue-router"
import { useUserStore } from '@/stores/models/user.js';
import { userLogout } from '@/api/user.js'
import { Message } from '@arco-design/web-vue' // 导入 user store

const selectedKeys = ref()
const route = useRoute()
const userStore = useUserStore() // 使用 user store

// 定义上级路由映射
const parentRoutes = {
  '/user/manager': '/user',
  '/user/online': '/user'
};

// 监听路由变化，更新 selectedKeys
watch(route, (newRoute) => {
  const keys = [newRoute.path];
  if (parentRoutes[newRoute.path]) {
    keys.push(parentRoutes[newRoute.path]);
  }
  selectedKeys.value = keys;
})

// 在组件挂载时设置初始选中项
onMounted(() => {
  const keys = [route.path];
  if (parentRoutes[route.path]) {
    keys.push(parentRoutes[route.path]);
  }
  selectedKeys.value = keys;
})

// 退出登录
const logout = () => {
  userLogout()
    .then(res => {
      if (res.data.code === 1) {
        userStore.clearUser()
        Message.success('退出成功')
        router.push('/login')
      }
    })
    .catch(error => {
      console.log(error)
    })
}
</script>

<template>
  <div class="header-component">
    <div class="header-container">
      <div class="logo-container">
        <div class="logo">
          <div class="icon">
            <img src="@/assets/pic/zhudao-logo.png" alt="logo" class="logo-icon">
          </div>
          <div class="title">ZD-OJ</div>
        </div>
      </div>
      <a-menu mode="horizontal" class="menu" :selected-keys="selectedKeys">
        <a-menu-item key="/home" @click="router.push('/home')">主页</a-menu-item>
        <a-menu-item key="/answer" @click="router.push('/answer')">答题记录</a-menu-item>
        <a-menu-item key="/question/manager" @click="router.push('/question/manager')" v-if="userStore.auth === 'admin'">题目管理</a-menu-item>
        <a-menu-item key="/user" @click="router.push('/user')" v-if="userStore.auth === 'admin'">用户管理</a-menu-item>
        <a-menu-item key="/about" @click="router.push('/about')">关于</a-menu-item>
      </a-menu>
      <div class="user-container">
        <a-dropdown position="bottom" trigger="hover">
          <div class="nickname">{{ userStore.nickname || '未登录' }}</div>
          <template #content>
            <a-doption v-if="userStore.nickname === ''" @click="router.push('/login')">去登录</a-doption>
            <a-doption v-else @click="logout">退出</a-doption>
          </template>
        </a-dropdown>
      </div>
    </div>
  </div>
</template>

<style scoped>
.header-component {
  width: 100%;
  height: 60px;
  background: var(--color-bg-2);
  box-shadow: 0 2px 8px rgba(16, 38, 57, 0.15);
  position: relative;
  z-index: 100;
}

.header-container {
  display: flex;
  width: 80%;
  height: 100%;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}

.logo-container {
  margin-right: 20px;
}

.logo {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.icon {
  margin-right: 8px;
}

.logo-icon {
  width: 40px;
  height: 40px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-text-1);
}

.menu {
  font-weight: 600;
  flex: 1;
}

.menu :deep(.arco-menu-item) {
  transition: all 0.2s ease;
}

.menu :deep(.arco-menu-item:hover) {
  color: rgb(var(--primary-6));
  background-color: rgba(var(--primary-6), 0.1);
}

.menu :deep(.arco-menu-item.arco-menu-selected) {
  font-weight: 600;
}

.user-container {
  position: relative;
  cursor: pointer;
}

.nickname {
  font-size: 18px;
  font-weight: bold;
  padding: 0 10px;
}
</style>
